<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/common.js"></script>
    <style>
        .input-group {
            margin-bottom: 10px;
        }
        #createCode{
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="form">
        <div class="input-group">
            <label for="">用户名:</label>
            <input type="text" id="user">
            <span id="userTips"></span>
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" id="pwd">
            <span id="pwdTips"></span>
        </div>
        <div class="input-group">
            <label for="">确&emsp;认:</label>
            <input type="text" id="repwd">
            <span id="repwdTips"></span>
        </div>
        <div class="input-group">
            <label for="">验证码:</label>
            <input type="text" id="code">
            <span id="createCode">abcd</span>
            <span id="codeTips"></span>
        </div>
        <div class="input-group">
            <button id="btn">点击</button>
        </div>
    </div>
</body>
<script>
    // 用户名要求: 由数字 字母 下换线 组成, 6-12位,且不能以数字开头

    // 按照从易到难顺序验证:
    // a. 6-12位
    // b. 不能以数字开头
    // c. 由数字 字母 下换线 组成 -> 所有的字符都要在这个范围中(合法字符) 在这个范围以外(非法字符)

    // (1) 获取元素 绑定事件 -> 取值
    var userInp = document.getElementById("user");
    var userTips = document.getElementById("userTips");
    var pwdInp = document.getElementById("pwd");
    var pwdTips = document.getElementById("pwdTips");
    var repwdInp = document.getElementById("repwd");
    var repwdTips = document.getElementById("repwdTips");
    var codeInp = document.getElementById("code");
    var codeTips = document.getElementById("codeTips");
    var createCodeSpan = document.getElementById("createCode");
    var btn = document.getElementById("btn");

    // 页面加载时 随机验证码放到createCodeSpan

    createCodeSpan.innerText = randCode();

    // 点击切换
    createCodeSpan.onclick = function(){
        createCodeSpan.innerText = randCode();
    }

    btn.onclick = function () {
        var user = userInp.value;// '123123'
        var pwd = pwdInp.value;
        var repwd = repwdInp.value;
        var code = codeInp.value;

        //a. 长度6-12位 
        if (user.length >= 6 && user.length <= 12) {
            console.log("len ok!");

            // b. 不能以数字开头
            var firstChar = user.charAt(0);
            // isNaN()  传入一个参数判断是否是非数字(NaN)  是非数字返回true 数字-> false  (如果传入的参数不是number 隐式转number在判断)
            // isNaN("a"); // 'a' -> NaN -> true
            // isNaN("1"); // '1' -> 1 -> false
            if (isNaN(firstChar)) { // true-> 非数字
                console.log("非数字开头");

                // c. 由数字 字母 下换线 组成 -> 所有的字符都要在这个范围中(合法字符) 在这个范围以外(非法字符)
                var flag = true; // 假设都是合法字符 (找到一个非法的即可推翻假设)

                for (var i = 0; i < user.length; i++) {
                    var char = user.charAt(i); //对应下标的字符
                    if (normalList.indexOf(char) == -1) { //找到一个非法的  normalList中没有
                        flag = false;
                        break;
                    }
                }
                if (flag) {
                    userTips.innerText = "√";
                    userTips.style.fontSize = "12px";
                    userTips.style.color = "green";
                } else {
                    userTips.innerText = "用户名由数字,字母,下划线组成!";
                    userTips.style.fontSize = "12px";
                    userTips.style.color = "red";
                }

            } else { //数字
                userTips.innerText = "用户名不能以数字开头!";
                userTips.style.fontSize = "12px";
                userTips.style.color = "red";
            }

        } else {
            userTips.innerText = "用户名需要在6-12位之间!";
            userTips.style.fontSize = "12px";
            userTips.style.color = "red";
        }

        var isPwdOk = false; // 每次默认密码格式有误
        if (pwd.length >= 6 && pwd.length <= 12) {
            console.log("pwd len ok");
            var flag = true; //假设都是合法的
            for (var char of pwd) {

                // !normalList.includes(char) == true  => normalList.includes(char) == false
                if (!normalList.includes(char)) {
                    flag = false;
                    break;
                }
            }
            if (flag) {

                // 密码中是否包含数字  大写字母  小写字母 _

                // 假设不存在
                var isExistNum = false;
                var isExistBig = false;
                var isExistSmall = false;
                var isExistSpe = false;

                for (var char of pwd) {
                    if (numList.includes(char)) {
                        isExistNum = true;
                    } else if (smallList.includes(char)) {
                        isExistSmall = true;
                    } else if (bigList.includes(char)) {
                        isExistBig = true;
                    } else if (speList.includes(char)) {
                        isExistSpe = true;
                    }
                }

                var level = isExistNum + isExistBig + isExistSmall + isExistSpe;
                console.log(level);// 1 2 3 4 

                switch (level) {
                    case 1: pwdTips.innerText = "密码强度:弱"; break;
                    case 2: pwdTips.innerText = "密码强度:中"; break;
                    case 3: pwdTips.innerText = "密码强度:强"; break;
                    case 4: pwdTips.innerText = "密码强度:超强"; break;
                }
                pwdTips.style.fontSize = "12px";
                pwdTips.style.color = "green";

                isPwdOk = true;

                // 放在此处 密码正确时才能验证 否则就无法验证
                


            } else {
                pwdTips.innerText = "密码由数字,字母,下划线组成!";
                pwdTips.style.fontSize = "12px";
                pwdTips.style.color = "red";
            }

        } else {
            pwdTips.innerText = "密码需要在6-12位之间!";
            pwdTips.style.fontSize = "12px";
            pwdTips.style.color = "red";
        }

        // 非空验证
        // if(repwd!=""){}
        // if(repwd){}

        // 确认密码 需要在密码正确的前提下进行验证, 否则不准确
        if(isPwdOk){// 密码格式正确
            if (repwd) {  //有值
                if (pwd === repwd) { // 相同
                    repwdTips.innerText = "√"
                    repwdTips.style.fontSize = "12px";
                    repwdTips.style.color = "green";
                } else {
                    repwdTips.innerText = "两次密码输入不一致!";
                    repwdTips.style.fontSize = "12px";
                    repwdTips.style.color = "red";
                }
            } else {
                repwdTips.innerText = "请再次确认!";
                repwdTips.style.fontSize = "12px";
                repwdTips.style.color = "red";
            }
        }else{
            repwdTips.innerText = "密码格式有误,请先修改密码!";
            repwdTips.style.fontSize = "12px";
            repwdTips.style.color = "red";
        }

        // 用户输入的验证码 和 随机验证码做对比 
        // 如何忽略大小写 -> 两边的值统一转小写后比较
        if(code){
            if(code.toLowerCase() == createCodeSpan.innerText.toLowerCase()){
                codeTips.innerText = "√";
                codeTips.style.fontSize = "12px";
                codeTips.style.color = "green";
            }else{
                codeTips.innerText = "验证码有误";
                codeTips.style.fontSize = "12px";
                codeTips.style.color = "red";
            }
        }else{
            codeTips.innerText = "请先输入验证码!";
            codeTips.style.fontSize = "12px";
            codeTips.style.color = "red";
        }

        
    }



</script>

</html>